<template>
	<view>
		<view class="content">
			<view class="uni-flex" @tap="dianji(1)">
				<image src="../../static/image/weixinqianbao.png" mode="" class="weixin-tupian"></image>
				<view class="wexin">
					<view class="wexin-title">微信钱包</view>
					<!-- <view class="weixin-shuoming">提现即时到账</view> -->
				</view>
				<view class="" style="flex: 1;display:flex;flex-direction: row-reverse ;">
					<!-- <view class="weixin-name">鱼汤没有鱼</view> -->
					<image v-if="type==1" src="../../static/image/yiyuedu.png" mode="" class="queren"></image>
				</view>
				<!-- <image src="../../static/image/qianjin.png" mode="" class="qianjin"></image> -->
			</view>
			<view class="uni-flex" @tap="dianji(2)">
				<image src="../../static/image/zhifubaohaha.png" mode="" class="weixin-tupian" style="height: 54rpx;"></image>
				<view class="wexin">
					<view class="wexin-title">支付宝</view>
					<!-- <view class="weixin-shuoming">提现即时到账</view> -->
				</view>
				<view class="" style="flex: 1;display:flex;flex-direction: row-reverse ;">
					<!-- <view class="weixin-name">鱼汤没有鱼</view> -->
					<image v-if="type==2" src="../../static/image/yiyuedu.png" mode="" class="queren"></image>
				</view>
				<!-- <image src="../../static/image/qianjin.png" mode="" class="qianjin"></image> -->
			</view>
		</view>
		<view class="content">
			<view class="tixianbiaoti">充值金额</view>
			<view class="uni-flex" style="border-bottom: 4rpx solid #F2F2F2;padding-bottom: 8rpx;">
				<view class="tixian-fontsize" style="padding-left: 40rpx;padding-right: 32rpx;">￥</view>
				<view class="tixian-fontsize">
					<u-input v-model="jine" :border="false" type="number" height="84" placeholder="输入金额" :clearable="false" :custom-style="{'font-size':'60rpx'}"/>
				</view>
			</view>
			<view class="tishi">
				注：充值余额
			</view>
		</view>
		<view class="" style="padding:20rpx 54rpx 80rpx;" >	
			<submitButtom text="充值" :buttonMethod="submit" backgroundColor="#07C160"></submitButtom>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import submitButtom from "@/components/submit-button/submit-button.vue"
	export default {
		components:{
			submitButtom
		},
		data() {
			return {
				jine:null,
				type:1,
				jine:null,
				uid:uni.getStorageSync("token")
			}
		},
		methods: {
			submit:function(){
				var that = this;
				// that.$refs.uToast.show({
				// 	title: "充值成功",
				// 	duration:1000,
				// 	back:true
				// });
				// return;
				if(that.type == 1){
					that.$util.nuiAjax(that.$jiekou.chongzhiOrder,{type:that.type,uid:that.uid,jine:that.jine},function(res){
						
						res.timestamp = parseInt(res.timestamp);
						console.log(res);
						uni.requestPayment({
						    provider: 'wxpay',
						    orderInfo: res, //微信订单数据
						    success: function (res) {
						        console.log('success:' + JSON.stringify(res));
								that.$refs.uToast.show({
									title: "充值成功",
									duration:1000,
									back:true,
								});
								that.jine = null;
								uni.$emit("updateJine");
						    },
						    fail: function (err) {
						        that.$refs.uToast.show({
						        	title: "充值失败",
						        	duration:1000
						        });
						    }
						});
					});
				}else{
					that.$util.nuiAjax(that.$jiekou.aliPayOrderInfo,{type:that.type,uid:that.uid,jine:that.jine},function(res){
						
						if(res.result=="true"){
							uni.requestPayment({
							    provider: 'alipay',
							    orderInfo: res.data, //支付宝订单数据
							    success: function (res) {
							        that.$refs.uToast.show({
							        	title: "充值成功",
							        	duration:1000,
										back:true
							        });
									that.jine = null;
							    },
							    fail: function (err) {
							        that.$refs.uToast.show({
							        	title: "充值失败",
							        	duration:1000
							        });
							    }
							});
						}
						
					});
				}
				
			},
			dianji:function(type){
				this.type = type;
			}
		}
	}
</script>

<style lang="scss">
	.tishi{
		// height:34rpx;
		font-size:24rpx;
		font-weight:400;
		color:rgba(255,149,0,1);
		line-height:34rpx;
		padding:38rpx 0 40rpx 40rpx;
	}
	page {
		background-color: $page-bg-color;
	}
	.tixian-fontsize{
		height:84rpx;
		font-size:60rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:84rpx;
	}
	.tixianbiaoti{
		// height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:40rpx;
		padding: 40rpx;
	}
	.weixin-name{
		padding: 50rpx 14rpx 0 0;
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:40rpx;
	}
	.wexin-title{
		// height:40rpx;
		font-size:28rpx;
		font-weight:500;
		color:rgba(51,51,51,1);
		line-height:40rpx;
		padding-top: 53rpx;
	}
	.weixin-shuoming{
		height:34rpx;
		font-size:24rpx;
		font-weight:400;
		color:rgba(138,139,144,1);
		line-height:34rpx;
	}
	.queren{
		width: 32rpx;
		height: 32rpx;
		margin-top: 54rpx;
		margin-right: 30rpx;
	}
	.qianjin{
		width: 10rpx;
		height: 20rpx;
		margin-top: 60rpx;
		margin-right: 30rpx;
	}
	.weixin-tupian{
		width: 54rpx;
		height: 48rpx;
		margin:46rpx 20rpx  46rpx 30rpx;
	}
	.content {
		box-shadow: 0px 8rpx 16rpx 0px rgba(246, 247, 248, 1);
		background-color: #FFFFFF;
		margin-top:20rpx;
	}
</style>
